<template>
  <div>
    <el-form :model="data.form" :rules="data.rules">
      <el-form-item label="旧密码" prop="oldPassword" >
        <el-input v-model="data.form.oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码"   prop="password">
        <el-input v-model="data.form.password"></el-input>
      </el-form-item>
      <el-form-item label="验证密码"   prop="confirmPassword">
        <el-input v-model="data.form.confirmPassword"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import {reactive}  from "vue";
const validatePass1 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入新密码'));
  } else if (value !== '123') {
    callback(new Error('旧密码错误'));
  }else{
    callback();
  }
}
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入新密码'));
  } else if (value !== data.form.password) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
}
const data = reactive({
  form: {
    oldPassword: '',
    password: '',
    confirmPassword: ''
  }
  ,
  rules: {
    oldPassword: [
        { required: true, message: '请输入旧密码', trigger: 'blur' },
      {validator: validatePass1, trigger: 'blur'}
    ],
    password: [
      { required: true, message: '请输入新密码', trigger: 'blur' },
      { min: 6, max: 32, message: '长度在 6 到 32个字符', trigger: 'blur' }
    ],
    confirmPassword: [
      { required: true, message: '请再次输入新密码', trigger: 'blur' },

      { validator: validatePass2, trigger: 'blur' }
    ]
  }
})
</script>
